<template>
  <div class="bg">
    <List></List>
    <div class="search-input">
          <input type="text" @blur="inputBlur" @keydown.enter="search" @keyup = "get($event)">
          <input type="button" value="搜一下" @click="search">
          <div class="search-select">
            <transition-group name="itemfade" tag="ul" mode="out-in" v-cloak>
                <li  v-for="(dropDown,index) in dropDownData" :key="index" v-text="dropDown" :class="{selectback:index==now}" class="search-select-option search-select-list" @click="panelLi(index)"></li>
            </transition-group>
          </div>
      </div>
      <div class="logoSelect">
          <div class="textCenter">
            <img :src="logos[selectIndex]" @click="select">
            <span class="logoList-arrow" @click="select"></span>
            <transition name="logofade">
            <ul class="logoList" v-show="showSelect" @click="selectLi">
                <li class="logo-search" v-for="(logo,index) of logos" :key="logo.id">
                    <img :src="logo" :data-index="index">
                </li>
            </ul>
            </transition>
          </div>
      </div>
  </div>
</template>

<script>
import List from '@/components/demoList'
export default {
  name:'search',
  components:{
      List
  },
  data(){
      return{
          dropDownData:[],
          now: -1,
          logos:[
              require('../../static/img/360_logo.png'),
              require('../../static/img/baidu_logo.png'),
              require('../../static/img/sougou_logo.png'),
              require('../../static/img/bing_logo.png')
          ],
          keyWord:'',
          searchType: [{
                name: '360搜索',
                searchSrc: 'https://www.so.com/s?ie=utf-8&shb=1&src=360sou_newhome&q='
            }, {
                name: '百度搜索',
                searchSrc: 'https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd='
            }, {
                name: '搜狗搜索',
                searchSrc: 'https://www.sogou.com/web?query='
            },{
                name:'Bing搜索',
                searchSrc:'http://cn.bing.com/search?q='
            }
            ],
            selectIndex:0,
            showSelect:false
      }
  },
  methods:{
      select(){
          this.showSelect = !this.showSelect
      },
      selectLi(e){
          if(e.target.nodeName.toLowerCase() === 'img'){
              const index = parseInt(e.target.dataset.index)
              this.selectIndex = index
              this.showSelect = !this.showSelect
          }
      },
      search(){
          let url = ''
          if(this.selectIndex === 4){
              url = this.searchType[this.selectIndex].searchSrc + this.keyWord +'&qs=n&form=QBRE&sp=-1&pq='
          }else{
              url = this.searchType[this.selectIndex].searchSrc + this.keyWord
          }
          window.open(url)
      },
      inputBlur(e){
          this.keyWord = e.target.value
      },
      get(e){
          let _this = this
          $.ajax({
              url:'https://sug.so.360.cn/suggest?word=' + e.target.value + '&encodein=utf-8&encodeout=utf-8',
              type:'post',
              dataType:'jsonp',
              success:function(res){
                  _this.dropDownData = res.s
              }
          })
      },
      panelLi(index){
          this.keyword = this.dropDownData[index]
          this.search()
      }
  }
}
</script>

<style lang="less" scoped>
    .bg{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: url(../../static/img/background.png);
        background-size: cover;
        z-index: 0;
        .logoList{
            position: absolute;
            top: 100%;
            width: 200px;
            left: 50%;
            margin-left: -100px;
            z-index: 999999;
            border: 1px solid #d4d4d4;
            list-style: none;
            padding-left: 0;
        }
        .logoList img{
            display: block;
            margin: 0 auto;
            user-select: none;
            cursor: pointer;
            width: 100%;
        }
        .logoList li {
            width: 100%;
            height: 80px;
            background-color: #FEFEFE; 
            line-height: 80px;
            padding-top: 1px;
        }
        .logoList-arrow{
            position: absolute;
            width: 0;
            height: 0;
            border: 8px solid;
            border-color: #000 transparent transparent transparent;
            right: 100px;
            top: 66px;
            cursor: pointer
        }
        .logoSelect{
            width: 100%;
            position: relative;
            left: 50%;
            top: 20%;
            transform: translate(-20%,-30%);
        }
        .textCenter{
            width: 600px;
            height: 140px;
            position: absolute;
            z-index: 0;
        }
        .logofade-enter-active, .logofade-leave-active{
            transition: all .5s;
        }
        .logofade-enter, .logofade-leave-active{
            opacity: 0;
            transform: translateY(20px)
        }
        .search-input{
            position: absolute;
            top: 45%;
            left: 50%;
            transform: translate(-45%,-50%);
            & input[type="text"]{
                border: 1px solid #e4e4e4;
                box-sizing: border-box;
                width: 500px;
                height: 45px;
                font-size: 18px;
                float: left;
                padding-left: 10px;
                padding-right: 10px;
                overflow: hidden;
            }
            & input[type="button"]{
                height: 45px;
                width: 100px;
                border: 1px solid mediumseagreen;
                background-color: mediumseagreen;
                color: white;
                font-size: 16px;
                font-weight: bold;
                float: left;
                cursor: pointer;
            }
        }
        .itemfade-enter-active,.itemfade-leave-active{
            transition: all .5s;
        }
        .itemfade-leave-active{
            position: absolute;
        }
        .selectback {
            background-color: #eee !important;
            cursor: pointer
        }
        .search-select{
            position: absolute;
            top: 45px;
            width: 500px;
            box-sizing: border-box;
            z-index: 999;
        }
        .search-select li {
            border: 1px solid #d4d4d4;
            border-top: none;
            border-bottom: none;
            background-color: #fff;
            width: 100%
        }
        .search-select-option {
            box-sizing: border-box;
            padding: 7px 10px;
        }

        .selectback {
            background-color: #eee !important;
            cursor: pointer
        }
        .search-select-list {
            transition: all 0.5s
        }
        .search-select ul{
            margin:0;
            padding: 0;
            text-align: left; 
            list-style: none;
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
        }
    }
</style>


